<template>

  <div class="list-container">
    <el-form class="search-panel" v-model="sercchData" :inline="true">
      <el-form-item
        class="search-input"
        label="输入搜索："
      >
        <el-input v-model="sercchData.name" placeholder="用户名/姓名"></el-input>
      </el-form-item>
      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addRoles"
        >
          新增角色
        </el-button>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="characterName" label="角色名称" align="center">
          </el-table-column>
          <el-table-column
            prop="characterDescription"
            label="角色描述"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="memberQuantity"
            label="成员数量"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="operator" label="操作人" align="center">
          </el-table-column>
          <el-table-column prop="operateTime" label="操作时间" align="center">
          </el-table-column>
          <!-- <el-table-column prop="enable" label="是否启用" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.valueswitch" active-text="启用" active-color="#13ce66">
              </el-switch>
            </template>
          </el-table-column> -->
          <!--    操作-->
          <el-table-column label="操作" fixed="right" fit align="center">
            <template align="center">
              <el-button icon="el-icon-setting" type="text" @click="authorizationSet">
                权限设置
              </el-button>
              <el-button icon="el-icon-edit" type="text" @click="OptionChange = true">
                修改
              </el-button>
              <el-button
                icon="el-icon-delete"
                type="text"
                @click="OptionDeleteVisible = true"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>

<el-dialog
  title="修改"
  :visible.sync="OptionChange"
  width="30%"
  >
  <span>修改修改修改修改</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="OptionChange = false">取 消</el-button>
    <el-button type="primary" @click="OptionChange = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Card from "@/components/card/card";
export default {
  components: {
    Card,
  },
  data() {
    return {
      sercchData: {
        name: "",
        startToEnd: "",
      },
      OptionChange: false,
      value: {},
      totalData:0,
      pageSize:10,
      currentPage: 1,
      valuedate: "",
      message: "",
      form: {
        userName: "", //输入搜索
        // department: "", //部门
        // sort: "", //排序
      },
      tableData: [
        {
          characterName: "考勤核查1部",
          characterDescription: "职能描述1",
          memberQuantity: "1",
          operator: "一",
          operateTime: "2019/11/12 13:00",
          valueswitch: false,
        },
        {
          characterName: "考勤核查2部",
          characterDescription: "职能描述2",
          memberQuantity: "2",
          operator: "二",
          operateTime: "2019/11/12 13:00",
          valueswitch: false,
        },
        {
          characterName: "工资结算1部",
          characterDescription: "职能描述3",
          memberQuantity: "3",
          operator: "三",
          operateTime: "2019/11/12 13:00",
          valueswitch: false,
        },
      ],
    };
  },

  methods: {
    onSubmit(){},
    addRoles(){},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 权限修改
    authorizationSet() {
      this.$router.push({path:"roles/authorization"})
    },
  },
};
</script>

<style scoped>
</style>